<template>
  <el-header class="header-bar">
    <div class="logo-title">
      <span class="logo">[logo]</span>
      <span class="title">钻完井综合工作平台</span>
    </div>
    <!-- <el-menu mode="horizontal" class="main-menu" :default-active="activeMenu">
      <el-menu-item v-for="item in menus" :key="item" :index="item">{{ item }}</el-menu-item>
    </el-menu> -->
    <div class="main-menu"></div>
    <div class="user-info">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :size="nowSize(40)" :icon="UserFilled" />
          <span style="margin: 0 10px">admin</span>
          <el-icon><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { ArrowDown } from '@element-plus/icons-vue'
  import { UserFilled } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const activeMenu = ref('菜单1')
  const menus = ['菜单1', '菜单2', '菜单3', '菜单4']
  const nowClientWidth = ref(document.documentElement.clientWidth)

  function nowSize(val: number, initWidth = 1920) {
    return val * (nowClientWidth.value / initWidth)
  }

  const handleResize = () => {
    nowClientWidth.value = document.documentElement.clientWidth
  }

  onMounted(() => {
    window.addEventListener('resize', handleResize)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })

  const logout = () => {
    router.push('/login')
  }
</script>

<style lang="scss" scoped>
  $header-bg: #2986c7;
  $header-height: 60px;

  .header-bar {
    background: $header-bg;
    color: #fff;
    display: flex;
    align-items: center;
    height: $header-height;
    padding: 0 24px;

    .logo-title {
      display: flex;
      align-items: center;

      .logo {
        font-weight: bold;
        font-size: 22px;
        margin-right: 16px;
      }
      .title {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .main-menu {
      flex: 1;
      margin-left: 40px;
      background: transparent;
      color: #fff;
    }

    .user-info {
      margin-left: 24px;
      .el-dropdown-link {
        color: #fff;
        border: none !important;
        outline: none !important;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 16px;
        &:hover,
        &:focus {
          border: none !important;
          outline: none !important;
        }
      }
    }

    :deep(.el-popper) {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    :deep(.el-dropdown-menu) {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }

    :deep(.el-dropdown-menu__item) {
      border: none !important;
      outline: none !important;
    }

    :deep(.el-dropdown-menu__item:focus) {
      background-color: #f5f7fa;
      border: none !important;
      outline: none !important;
    }
  }
</style>
